import React from 'react'
import Dialog from 'rc-dialog'
import './Modal.css'

let mousePosition
export const destroyFns = [];

const flag = (className) => `gy_${className}`

const getClickPosition = (e) => {
    mousePosition = {
        x: e.pageX,
        y: e.pageY,
    };
    // 100ms 内发生过点击事件，则从点击位置动画展示
    // 否则直接 zoom 展示
    // 这样可以兼容非点击方式展开
    setTimeout(() => {
        mousePosition = null;
    }, 100);
};
// 只有点击事件支持从鼠标位置动画展开
document.documentElement.addEventListener('click', getClickPosition, true);

function convertLegacyProps(type) {
    if (type === 'danger') {
        return { danger: true };
    }
    return { type };
}

const Modal = props => {

    const handleCancel = (e) => {
        const { onCancel } = props;
        onCancel?.(e);
    };

    const handleOk = (e) => {
        const { onOk } = props;
        onOk?.(e);
    };

    const renderFooter = (locale) => {
        const { okText, okType, cancelText } = props;
        return (
            <>
                <button
                    onClick={handleCancel}
                    {...props.cancelButtonProps}
                    className={'gy-cancelButton'}
                >
                    {cancelText || locale.cancelText}
                </button>
                <button
                    {...convertLegacyProps(okType)}
                    onClick={handleOk}
                    {...props.okButtonProps}
                    className={'gy-okButton'}
                >
                    {okText || locale.okText}
                </button>
            </>
        );
    };

    const {
        prefixCls: customizePrefixCls,
        footer,
        visible,
        wrapClassName,
        centered,
        getContainer,
        closeIcon,
        focusTriggerAfterClose = true,
        ...restProps
    } = props;

    return (
        <Dialog
            {...restProps}
            prefixCls={'gy'}
            wrapClassName={`${wrapClassName}`}
            footer={renderFooter({ okText: '确定', cancelText: '取消' })}
            visible={visible}
            onClose={handleCancel}
        />
    );
};
Modal.defaultProps = {
    width: 660,
    visible: false,
}

export default Modal